<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;
use yii\helpers\ArrayHelper;

$this->title = 'show';
?>
<style>
	.jOrgChart {padding:10px;padding-left:200px;}
	.jOrgChart .line {height: 20px;width:4px;}
	.jOrgChart .down {background-color: #3c8dbc;margin:0 auto;}
	.jOrgChart .top {border-top  : 3px solid #3c8dbc;}
	.jOrgChart .left {border-right: 2px solid #3c8dbc;}
	.jOrgChart .right { border-left: 2px solid #3c8dbc;}
	.jOrgChart td {text-align: center;vertical-align : top;padding : 0; }
	.jOrgChart .node {background-color: #3c8dbc; display: inline-block; width: 96px;height: 60px;z-index : 10;border-radius: 8px;border: 3px solid #FFF;}
	.jOrgChart .node span{display:block;width:100%;height:100%;text-align:center;line-height:60px;color:#FFF;font-size:14px;}
	.jOrgChart .node:hover{background:#316d90;}
	.drag-active { border-style: dotted !important;}
	.drop-hover { border-style: solid !important; border-color: #E05E00 !important;}
	.content{min-height:0;}
</style>
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box-header"><h2 class="box-title">流程图展示</h2></div>
			<div class="box-body add_department">
				<div class="box-body">
					<div class="form-group">
						<label>流程选择</label>
						<?=Html::dropDownList('process', '', $process , ['class'=>'form-control process', 'prompt' => '请选择流程']);?>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="main"></section>
<div id="chart" class="orgChart"></div>

<script type="text/javascript" src="js/jquery.js"></script> 
<script>
	$(function(){
	  $.fn.jOrgChart = function(options) {
	    var opts = $.extend({}, $.fn.jOrgChart.defaults, options);
	    var $appendTo = $(opts.chartElement);
	    $this = $(this);
	    var $container = $("<div class='" + opts.chartClass + "'/>");
	    if($this.is("ul")){
	      buildNode($this.find("li:first"), $container, 0,opts);
	    }
	    else if($this.is("li")) {
	      buildNode($this, $container, 0, opts);
	    }
	    $appendTo.append($container);
	  };
	  $.fn.jOrgChart.defaults = {
	    chartElement : 'body',
	    depth      : -1,
	    chartClass : "jOrgChart",
	    dragAndDrop: false
	  };
	  var nodeCount = 0;
	  function buildNode($node, $appendTo, level, opts) {
	    var $table = $("<table cellpadding='0' cellspacing='0' border='0'/>");
	    var $tbody = $("<tbody/>");
	    var $nodeRow = $("<tr/>").addClass("node-cells");
	    var $nodeCell = $("<td/>").addClass("node-cell").attr("colspan", 2);
	    var $childNodes = $node.children("ul:first").children("li");
	    var $nodeDiv;
	    if($childNodes.length > 1) {
	      $nodeCell.attr("colspan", $childNodes.length * 2);
	    }
	    var $nodeContent = $node.clone().children("ul,li").remove().end().html();
	    nodeCount++;
	    $node.data("tree-node", nodeCount);
	    $nodeDiv = $("<div>").addClass("node").data("tree-node", nodeCount).append($nodeContent);
	    $nodeCell.append($nodeDiv);
	    $nodeRow.append($nodeCell);
	    $tbody.append($nodeRow);
	    if($childNodes.length > 0) {
	      $nodeDiv.css('cursor','n-resize');
	      if(opts.depth == -1 || (level+1 < opts.depth)) {
	        var $downLineRow = $("<tr/>");
	        var $downLineCell = $("<td/>").attr("colspan", $childNodes.length*2);
	        $downLineRow.append($downLineCell);
	        $downLine = $("<div></div>").addClass("line down");
	        $downLineCell.append($downLine);
	        $tbody.append($downLineRow);
	        var $linesRow = $("<tr/>");
	        $childNodes.each(function() {
	          var $left = $("<td>&nbsp;</td>").addClass("line left top");
	          var $right = $("<td>&nbsp;</td>").addClass("line right top");
	          $linesRow.append($left).append($right);
	        });
	        $linesRow.find("td:first").removeClass("top").end().find("td:last").removeClass("top");
	        $tbody.append($linesRow);
	        var $childNodesRow = $("<tr/>");
	        $childNodes.each(function() {
	           var $td = $("<td class='node-container'/>");
	           $td.attr("colspan", 2);
	           buildNode($(this), $td, level+1, opts);
	           $childNodesRow.append($td);
	        });
	      }
	      $tbody.append($childNodesRow);
	    }
	    if ($node.attr('class') != undefined) {
	        var classList = $node.attr('class').split(/\s+/);
	        $.each(classList, function(index,item) {
	            if (item == 'collapsed') {
	                console.log($node);
	                $nodeRow.nextAll('tr').css('visibility', 'hidden');
	                    $nodeRow.removeClass('expanded');
	                    $nodeRow.addClass('contracted');
	                    $nodeDiv.css('cursor','s-resize');
	            } else {
	                $nodeDiv.addClass(item);
	            }
	        });
	    }
	    $table.append($tbody);
	    $appendTo.append($table);
	  };
	});
</script>

<script>
	$(".process").change(function(){
		$("#main").html("");
		$("#chart").html("");
		var pcode = $(this).val();
	    var url = "<?= Url::toRoute('process/getprocess')?>";
	    var _csrf ="<?= Yii::$app->request->getCsrfToken()?>";
	    if (pcode) {
		    $.ajax({
		      type:"GET",
		      url:url,
		      data:{
		        _csrf:_csrf,
		        pcode:pcode
		      },
		      dataType:"json",
		      success:function(result){
	  	          var showlist = $("<ul id='org' style='display:none'></ul>");
		          showall(result.process, showlist);
		          $("#main").append(showlist);
		          $("#org").jOrgChart( {
		            chartElement : '#chart',
		            dragAndDrop : false
		          });
		      },
		      error:function(){
		        alert('网络忙');
		      }
		    });
	    }
	});

    function showall(menu_list, parent) {
      $.each(menu_list, function(index, val) {
        if(val.childrens.length > 0){
          var li = $("<li></li>");
          li.append("<span>"+val.name+"</span>").append("<ul></ul>").appendTo(parent);
          showall(val.childrens, $(li).children().eq(1));
        }else{
          $("<li></li>").append("<span>"+val.name+"</span>").appendTo(parent);
        }
      });
    }
</script>
